<template>
  <a-modal v-model:open="open"
           :keyboard="false"
           :mask-closable="false"
           width="100%"
           wrap-class-name="full-modal"
           @cancel="handleClose">
    <template #title>
      <div class="flex gui-padding justify-center fz18" style="border-bottom: 1px solid #eee;">新增船员资料</div>
    </template>
    <div class="content-body" style="padding:10px 100px;">
      <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          layout="vertical"
      >
        <a-row :gutter="40">
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">
                <a-form-item label="船员中文姓名" required>
                  <a-input v-model:value="form.xingMing" maxlength="100" placeholder="请填写"/>
                </a-form-item>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">船员英文姓名：</div>
              <a-input placeholder="请填写" v-model:value="form.yingWenMing" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">性别：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xingBie">
                <a-select-option :value="item.name" :key="item.name" v-for="item in xbList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">
                <a-form-item label="手机号" name="shouJiHao">
                  <a-input placeholder="请填写" v-model:value="form.shouJiHao" maxlength="100"/>
                </a-form-item>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">
                <a-form-item label="身份号：" required>
                  <a-input placeholder="请填写" @blur="getInfoFromIdCard(form.shenFenHao)"
                           @keyup="getInfoFromIdCard(form.shenFenHao)" v-model:value="form.shenFenHao" maxlength="100"/>
                </a-form-item>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">出生日期：</div>
              <a-date-picker class="w100" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                             v-model:value="form.chuShengRiQi" placeholder="请选择"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">
                <a-form-item label="船员分组">
                  <a-select class="w100" placeholder="请选择" v-model:value="form.fenZuId" @change="handleSelectFenzu">
                    <a-select-option :value="item.id" :key="item.id" v-for="item in chuanboFenzuList">
                      {{ item.zuMing }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </div>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10"><span class="red mr2">*</span>证书职位：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zhiWei">
                <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                    item.zhiWeiMing
                  }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">证书等级：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zhengShuDengJi">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zsdjList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">籍贯：</div>
              <a-input placeholder="请填写" v-model:value="form.jiGuan" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">血型：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xueXing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in cyxxList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">民族：</div>
              <a-input placeholder="请填写" v-model:value="form.minZu" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">婚姻状况：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.hunYin">
                <a-select-option :value="item.name" :key="item.name" v-for="item in hyzkList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">宗教信仰：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.zongJiaoXinYang">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zjxyList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">船员类型：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.leiXing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in cylxList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">毕业院校：</div>
              <a-input placeholder="请填写" v-model:value="form.biYeYuanXiao" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">最高学历：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.xueLi">
                <a-select-option :value="item.name" :key="item.name" v-for="item in zgxlList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">专业：</div>
              <a-input placeholder="请填写" v-model:value="form.zhuangYe" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">英文水平：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.yingYuShuiPing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in yyspList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">计算机水平：</div>
              <a-select class="w100" placeholder="请选择" v-model:value="form.jiSuanJiShuiPing">
                <a-select-option :value="item.name" :key="item.name" v-for="item in jsjspList">{{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">其他技能：</div>
              <a-input placeholder="请填写" v-model:value="form.qiTaJiNeng" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">身高（cm）：</div>
              <a-input placeholder="请填写" v-model:value="form.shenGao" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">体重（kg）：</div>
              <a-input placeholder="请填写" v-model:value="form.tiZhong" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">鞋号：</div>
              <a-input placeholder="请填写" v-model:value="form.xieHao" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">其他电话：</div>
              <a-input placeholder="请填写" v-model:value="form.qiTaDianHua" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">邮箱：</div>
              <a-input placeholder="请填写" v-model:value="form.youXiang" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">工作服号：</div>
              <a-input placeholder="请填写" v-model:value="form.gongZuoHao" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">紧急联系人：</div>
              <a-input placeholder="请填写" v-model:value="form.jinJiLianXiRen" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">紧急联系人电话：</div>
              <a-input placeholder="请填写" v-model:value="form.jinJiDianHua" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">紧急联系人地址：</div>
              <a-input placeholder="请填写" v-model:value="form.jinJiDiZhi" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">本人银行卡号：</div>
              <a-input placeholder="请填写" v-model:value="form.kaHao" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">开户行：</div>
              <a-input placeholder="请填写" v-model:value="form.kaiHuHang" maxlength="100"/>
            </div>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <div class="gutter-box fw mb10">
              <div class="mr6 mb10">备注：</div>
              <a-textarea rows="4" placeholder="请填写" v-model:value="form.beiZhu" maxlength="1000"/>
            </div>
          </a-col>
          <!-- <div class="gutter-box fw mb10"><div class="mr6 mb10">年龄：</div><a-input placeholder="请填写" v-model:value="form.nianling" maxlength="100" /></div>-->
          <!--<div class="gutter-box fw mb10"><div class="mr6 mb10">地址：</div><a-input placeholder="请填写" v-model:value="form.diZhi" maxlength="100" /></div>-->
          <!--<div class="gutter-box fw mb10"><div class="mr6 mb10">银行国际代码：</div><a-input placeholder="请填写" v-model:value="form.yinHangDaiMa" maxlength="100" /></div>
          <div class="gutter-box fw mb10"><div class="mr6 mb10">用途：</div><a-input placeholder="请填写" v-model:value="form.yongTu" maxlength="100" /></div>-->
          <!-- <div class="gutter-box fw mb10"><div class="mr6 mb10">银行户名：</div><a-input placeholder="请填写" v-model:value="form.huMing" maxlength="100" /></div>
          <div class="gutter-box fw mb10"><div class="mr6 mb10">持有人与船员关系：</div><a-input placeholder="请填写" v-model:value="form.chiYouRenGuanXi" maxlength="100" /></div>-->
          <!--<div class="gutter-box fw mb10"><div class="mr6 mb10">自定义船员标签：</div><a-textarea rows="8" placeholder="请填写" v-model:value="form.biaoQian" maxlength="100" /></div>-->
        </a-row>
      </a-form>
    </div>
    <template #footer>
      <div class="flex justify-center pr ftp3" style="z-index: 100">
        <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10">添加</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
  </a-modal>
</template>
<script setup>
const zhiweiList = ref([])
const formRef = ref()
const open = ref(false)
const emits = defineEmits(["success"])
const addLoading = ref(false)
const chuanboFenzuList = ref([])
const chuanboZhengshuList = ref([])
const userState = useStore.userState()
const xbList = computed(() => userState.getParameterList('xb'))
const cyxxList = computed(() => userState.getParameterList('cyxx'))
const zjxyList = computed(() => userState.getParameterList('zjxy'))
const yyspList = computed(() => userState.getParameterList('yysp'))
const jsjspList = computed(() => userState.getParameterList('jsjsp'))
const zgxlList = computed(() => userState.getParameterList('zgxl'))
const zsdjList = computed(() => userState.getParameterList('zsdj'))
const cylxList = computed(() => userState.getParameterList('cylx'))
const hyzkList = computed(() => userState.getParameterList('hyzk'))

const form = ref({
  xingMing: "",
  yingWenMing: "",
  xingBie: null,
  shouJiHao: "",
  shenFenHao: "",
  chuShengRiQi: "",
  fenZu: "",
  fenZuId: null,
  zhiWei: null,
  jiGuan: "",
  zongJiaoXinYang: null,
  minZu: null,
  hunYin: null,
  xueXing: null,
  leiXing: null,
  zhengShuDengJi: null,
  biYeYuanXiao: "",
  xueLi: null,
  zhuangYe: "",
  yingYuShuiPing: null,
  jiSuanJiShuiPing: null,
  qiTaJiNeng: "",
  shenGao: "",
  nianling: "",
  tiZhong: "",
  xieHao: "",
  gongZuoHao: "",
  qiTaDianHua: "",
  youXiang: "",
  diZhi: "",
  jinJiLianXiRen: "",
  jinJiDianHua: "",
  jinJiDiZhi: "",
  biaoQian: "",
  beiZhu: "",
  kaHao: "",
  huMing: "",
  kaiHuHang: "",
  yinHangDaiMa: "",
  chiYouRenGuanXi: "",
  yongTu: "",
})
const rules = ref({})


function isValidID(id) {
  const pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
  return pattern.test(id);
}

function getInfoFromIdCard(idCard) {
  const birthday = idCard.substring(6, 10) + "-" + idCard.substring(10, 12) + "-" + idCard.substring(12, 14);
  const gender = idCard.substring(16, 17) % 2 === 0 ? "女" : "男"; // 奇数为男，偶数为女
  const age = new Date().getFullYear() - idCard.substring(6, 10) - ((new Date().getMonth() + 1) > parseInt(idCard.substring(10, 12)) || (new Date().getDate() < parseInt(idCard.substring(12, 14))));
  if (isValidID(idCard)) {
    form.value.nianling = age
    form.value.xingBie = gender
    form.value.chuShengRiQi = birthday
  }
}

const handleSelectFenzu = (e) => {
  form.value.fenZu = chuanboFenzuList.value.find(c => c.id == e).zuMing
}

const handleSubmit = async () => {
  try {
    addLoading.value = true

    if (!form.value.xingMing) {
      useMessage().error("请输入船员姓名")
      addLoading.value = false
      return false;
    }
    /*if(!form.value.fenZuId){
      useMessage().error("请输入船员分组")
      addLoading.value = false
      return false;
    }*/
    if (!form.value.shenFenHao) {
      useMessage().error("请输入身份号")
      addLoading.value = false
      return false;
    }
    if (!form.value.zhiWei) {
      useMessage().error("请输入证书职位")
      addLoading.value = false
      return false;
    }
    if (form.value.shenFenHao.length < 15) {
      useMessage().error("身份号长度不符")
      addLoading.value = false
      return false;
    }


    const resp = await useSaveUpdateChuanYuanKuApi(form.value)
    addLoading.value = false
    useMessage().success("添加成功!")
    handleClose()
    emits("success")
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleLoadChuaboFenzuData = async () => {
  var res = await useLoadChuanYuanFenzuBiaoApi()
  chuanboFenzuList.value = res.data
}

const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}


const handleOpen = async () => {
  open.value = true;
  await handleLoadChuaboFenzuData()
  await handleLoadZhiweiData()
}

const handleClose = () => {
  open.value = false;
  form.value = {
    id: "",
    xingMing: "",
    yingWenMing: "",
    xingBie: null,
    shouJiHao: "",
    shenFenHao: "",
    chuShengRiQi: "",
    fenZu: "",
    fenZuId: null,
    zhiWei: null,
    jiGuan: "",
    zongJiaoXinYang: null,
    minZu: null,
    hunYin: null,
    xueXing: null,
    leiXing: null,
    zhengShuDengJi: null,
    biYeYuanXiao: "",
    xueLi: null,
    zhuangYe: "",
    yingYuShuiPing: null,
    jiSuanJiShuiPing: null,
    qiTaJiNeng: "",
    shenGao: "",
    nianling: "",
    tiZhong: "",
    xieHao: "",
    gongZuoHao: "",
    qiTaDianHua: "",
    youXiang: "",
    diZhi: "",
    jinJiLianXiRen: "",
    jinJiDianHua: "",
    jinJiDiZhi: "",
    biaoQian: "",
    beiZhu: "",
    kaHao: "",
    huMing: "",
    kaiHuHang: "",
    yinHangDaiMa: "",
    chiYouRenGuanXi: "",
    yongTu: "",
  }
}

defineExpose({
  handleOpen
})

</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    border-radius: 0;
    overflow: hidden !important;
    padding: 0px;
  }

  .ant-modal-body {
    flex: 1;
  }

  .content-body {
    padding: 20px 24px;
    height: calc(100vh - 130px);
    overflow: hidden auto;
  }
}
</style>
